<div *ngIf="isLoaded == false" class="loader">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>
<button class="btn btn-dark" (click)="toTopOfScreen()" id="toTopButton" title="Go to top">
    <img class="img-fluid cardIcon" id="topBtn" src="{{'assets/images/btn_arrow.png'}}">
</button>
<div class="row justify-content-around py-2">
    <div class="col-11 col-lg-5 bg-dark my-2">
        <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
            <mat-tab *ngFor="let img of merch.images; let i = index" [label]="i+1">
                <img class="img-fluid mt-1 merch-img" src="{{img}}">
            </mat-tab>
        </mat-tab-group>

    </div>
    <div class="col-11 col-lg-5 row">
        <table class="col-12 table table-dark text-center merch-info">
            <tbody>
                <tr>
                    <th>{{'MERCH-DETAIL.PRODUCT-NAME' | translate}}</th>
                    <td>{{merch.name}}</td>
                </tr>
                <tr>
                    <th>{{'MERCH-DETAIL.PRODUCT-SERIES' | translate}}</th>
                    <!-- <td>{{merch.series.name}}</td> -->
                    <td>{{merch.seriesObj.name}}</td>
                </tr>
                <tr>
                    <th>{{'MERCH-DETAIL.ON-SELL-DATE' | translate}}</th>
                    <td *ngIf="merch.sellDate!=-1; else multipleSellTime">
                        <!-- {{merch.series.sellTime[merch.sellDate]}} -->
                        {{merch.seriesObj.sellTime[merch.sellDate]}}
                    </td>
                    <ng-template #multipleSellTime>
                        <td>
                            <span *ngFor="let t of merch.seriesObj.sellTime">
                                {{t}} <br/>
                            </span>
                        </td>
                    </ng-template>
                </tr>
                <tr>
                    <th>{{'MERCH-DETAIL.PRICE' | translate}}</th>
                    <td>{{merch.price}}</td>
                </tr>
                <tr *ngIf="merch.productMaterial!='-'">
                    <th>{{'MERCH-DETAIL.PRODUCT-MATERIAL' | translate}}</th>
                    <td>{{merch.productMaterial}}</td>
                </tr>
                <tr *ngIf="merch.productTechnology!='-'">
                    <th>{{'MERCH-DETAIL.PRODUCT-TECHNOLOGY' | translate}}</th>
                    <td>{{merch.productTechnology}}</td>
                </tr>
                <tr *ngIf="merch.productPacking!='-'">
                    <th>{{'MERCH-DETAIL.PRODUCT-PACKING' | translate}}</th>
                    <td>{{merch.productPacking}}</td>
                </tr>
                <tr *ngIf="merch.productSize!='-'">
                    <th>{{'MERCH-DETAIL.PRODUCT-SIZE' | translate}}</th>
                    <td>{{merch.productSize}}</td>
                </tr>
                <tr *ngIf="merch.productDescription!='-'">
                    <th>{{'MERCH-DETAIL.PRODUCT-DESCRIPTION' | translate}}</th>
                    <td>{{merch.productDescription}}</td>
                </tr>
                <tr *ngIf="merch.tmall!='-'">
                    <th>{{'MERCH-DETAIL.PURCHASE-LINK' | translate}}</th>
                    <td> 
                        <a href="{{merch.tmall}}" target="_blank">
                            <img class="img-fluid" src="assets/images/tmall.png">
                        </a>
                    </td>
                </tr>
                <tr *ngIf="merch.weibo!='-'&&merch.hoyolab!='-'">
                    <th>{{'MERCH-DETAIL.REFERENCE' | translate}}</th>
                    <td>
                        <a *ngIf="merch.weibo!='-'" href="{{merch.weibo}}" target="_blank">
                            <img class="img-fluid" style="width: 30px;" src="assets/images/weibo.png">
                        </a>
                        <a *ngIf="merch.hoyolab!='-'" href="{{merch.hoyolab}}" target="_blank">
                            <img class="img-fluid" style="width: 30px;" src="assets/images/hoyolab.png">
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>